<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Nav title1="授权登录" bgColor="#db708c" :backIcon="false" style="color: #ffffff;z-index: 1;"></Nav>
		<view class="login_icon">
			<image class="user_avatar" src="../../static/logo.png" mode=""></image>
			<view class="logi_txt1">欢迎使用</view>
			<view class="logi_txt2">请授权登录，开启全新世界</view>
		</view>
		<view class="login_btn">
			<button class="logbtn_btn"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
		</view>
	</view>
</template>
<script setup>
	import { ref,onMounted,reactive } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	const code = ref("")
	const user_info = reactive({
		nickName: "微信用户",
		avatarUrl: "",
		openId: "",
		client_no: "",
	})
	const getPhoneNumber=(e)=>{
		console.log(1,e)
		uni.login({
			provider: "weixin",
			success: (res) => {
				if (res.errMsg == "login:ok") {
					console.log(res.code)
					code.value = res.code
					uni.getUserInfo({
						provider: "weixin",
						success: (res) => {
							//console.log(JSON.parse(res.rawData))
							//user_info.avatarUrl = JSON.parse(res.rawData).avatarUrl;
							user_info.nickName = JSON.parse(res.rawData).nickName;
						}
					})
					uni.request({
						url: getApp().globalData.baseUrl + "/login",
						method: "GET",
						data: {
							code: code.value,
							phoneCode: e.detail.code
						},
						success: (res) => {
							console.log(res)
							//console.log(JSON.parse(res.data.value.user))
							user_info.openId = JSON.parse(res.data.value.user).openId;
							user_info.client_no = JSON.parse(res.data.value.user).clientNo;
							//保存到本地
							console.log(user_info)
							uni.setStorageSync(
								// key: "user_info",
								// data: JSON.stringify(user_info)
								"user_info", JSON.stringify(user_info)
							)
							uni.setStorageSync("token", res.data.value.token)
							uni.setStorageSync('expireTime', Date.now() + 7200 * 1000)
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
					})
				} else {
					uni.showToast({
						title: "系统异常，请联系管理员"
					})
				}
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	onMounted(()=>{
		getColumnHeight()
	})
</script>
<style lang="less">
	.content {
		//display: flex;
		//flex-direction: column;
		//align-items: center;
		background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.login_icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20vh;
		//margin-top: 80rpx;
	}
	
	.user_avatar {
		width: 8rem;
		height: 8rem;
		border-radius: 20rpx;
	}
	
	.logi_txt1 {
		font-size: 40rpx;
		font-weight: bold;
		line-height: 60rpx;
		margin-top: 1rem;
	}
	
	.logi_txt2 {
		font-size: 24rpx;
		margin-top: 1rem;
	}
	
	.login_btn {
		margin: auto;
		margin-top: 2rem;
	}
	
	.logbtn_btn {
		background-color: #e77c90;
		width: 90%;
		color: #fff;
	}
</style>